<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
	<head>
		<%@ include file="/WEB-INF/jsp/inc/taglibs.jsp"%>
		<%@ include file="/WEB-INF/jsp/inc/meta.jsp"%>
	</head>
	<script>
		function addRow(){
			var listTable = document.getElementById("web_tab").getElementsByTagName("tbody")[0];
			
			var addTr = document.createElement("tr");
			listTable.appendChild(addTr);
			
			var td1 = document.createElement("td");
			var input1 = document.createElement("input");
			input1.name = "status" ;
			input1.style.width = "60px" ;
			input1.onchange = function(e){
				syncValue(e);
			}
			td1.appendChild(input1) ;
			addTr.appendChild(td1) ;
			
			var td2 = document.createElement("td");
			var select2 = document.createElement("select") ;			
			select2.name = "roleId" ;
		<c:forEach var="role" items="${roles}" varStatus="index">
			var option${index.index + 1} = document.createElement("option") ;
			option${index.index + 1}.value = "${role.id}" ;
			option${index.index + 1}.appendChild(document.createTextNode("${role.name}")) ;
			select2.appendChild(option${index.index + 1}) ;
		</c:forEach>
			td2.appendChild(select2) ;
			addTr.appendChild(td2) ;
			
			var td3 = document.createElement("td");
			var input3 = document.createElement("input");
			input3.name= "nextStatus" ;
			input3.style.width = "60px" ;
			td3.appendChild(input3) ;
			addTr.appendChild(td3) ;
			
			var td4 = document.createElement("td");
			var input4 = document.createElement("input");
			input4.name= "preStatus" ;
			input4.style.width = "60px" ;
			td4.appendChild(input4) ;
			addTr.appendChild(td4) ;
			
			var td5 = document.createElement("td");
			var input5 = document.createElement("input");
			input5.name= "refStatus" ;
			input5.style.width = "60px" ;
			td5.appendChild(input5) ;
			addTr.appendChild(td5) ;
			
			var td6 = document.createElement("td");
			var input6 = document.createElement("input");
			input6.name= "info" ;
			input6.style.width = "120px" ;
			td6.appendChild(input6) ;
			addTr.appendChild(td6) ;
			
			var td7 = document.createElement("td");
			var input7 = document.createElement("input");
			input7.name = "needEqui" ;
			input7.type = "radio" ; 
			td7.appendChild(input7) ;
			addTr.appendChild(td7) ;
			
			var td8 = document.createElement("td");
			var input8 = document.createElement("input");
			input8.name= "needTask" ;
			input8.type = "radio" ;
			td8.appendChild(input8) ;
			addTr.appendChild(td8) ;
			
			var td9 = document.createElement("td");
			var input9 = document.createElement("input");
			input9.name= "ableEdit" ;
			input9.type = "checkbox" ;
			td9.appendChild(input9) ;
			addTr.appendChild(td9) ;
			
			var td10 = document.createElement("td");
			var delBar = document.createElement("a");
			delBar.appendChild(document.createTextNode("删除"));
			delBar.href = "javascript:void(0)" ;
			delBar.onclick = function(e){
				delRow(e);
			}
			td10.appendChild(delBar) ;
			addTr.appendChild(td10) ;
			
		}
		
		function delRow(event){
		
			if(!event)event = window.event ;
			var target = event.srcElement||event.target ;
			
			var listTable = document.getElementById("web_tab").getElementsByTagName("tbody")[0];
			listTable.removeChild(target.parentNode.parentNode);
			
		}
		
		function syncValue(event){
			if(!event)event = window.event ;
			var target = event.srcElement||event.target ;
			
			var inputs = target.parentNode.parentNode.getElementsByTagName("input") ;
			for(var i = 0 ; i < inputs.length ; i++){
				if(inputs[i].type == "radio" || inputs[i].type == "checkbox"){
					inputs[i].value = target.value ;
				}
			}
		}
		
	</script>
	<body style="background: #E8F5FE; padding: 15px 18px;" class="scroll_r">
				
		<div id="right_w">
			<p>
				当前位置：报建管理
			</p>
		</div>
		<!-- 
		<input type="button" value="添加步骤" onclick="addRow()"/>
		 -->
		<form method="post" name="applyFlowForm" action="${approot}/admin/apply/flow_mod">
				<table border="0" cellpadding="" cellspacing="1" align="left"
					width="700px" id="web_tab">
					<tr>
						<th>当前状态</th>
						<th>角色</th>
						<th>下一步状态</th>
						<th>上一步状态</th>
						<th>拒绝状态</th>
						<th>说明</th>
						<th>设备登记</th>
						<th>任务单</th>
						<th>可修改</th>
						<!-- 
						<th>操作</th>
						 -->
					</tr>
				<c:forEach var="applyFlow" items="${applyFlows}">
					<tr>
						<td><input style="width:60px" name="status" onchange="syncValue(event)" value="${applyFlow.status}"/><input type="hidden" name="id" value="${applyFlow.id}"/></td>
						<td>
							<select name="roleId">
							<c:forEach var="role" items="${roles}">
								<option value="${role.id}" <c:if test="${role.id==applyFlow.roleId}">selected</c:if> >${role.name}</option>	
							</c:forEach>
							</select>
						</td>
						<td><input style="width:60px" name="nextStatus" value="${applyFlow.nextStatus}"/></td>
						<td><input style="width:60px" name="preStatus" value="${applyFlow.preStatus}"/></td>
						<td><input style="width:60px" name="refStatus" value="${applyFlow.refStatus}"/></td>
						<td><input style="width:120px" name="info" value="${applyFlow.info}"/></td>
						<td><input name="needEqui" type="radio" value="${applyFlow.status}" <c:if test="${applyFlow.needEqui == 1}">checked</c:if> /></td>
						<td><input name="needTask" type="radio" value="${applyFlow.status}" <c:if test="${applyFlow.needTask == 1}">checked</c:if> /></td>
						<td><input name="ableEdit" type="checkbox" value="${applyFlow.status}" <c:if test="${applyFlow.ableEdit == 1}">checked</c:if> /></td>
						<!-- 
						<td><a href="javascript:void(0)" onclick="delRow(event)">删除</a></td>
						 -->
					</tr>
				</c:forEach>
					<tfoot>
					<tr>
						<td colspan="10" style="height:30px;text-align:right;padding-right:20px;">
							流程的修改会影响整个报装管理功能，请慎重修改！
							<input type="button" value="提交修改" onclick="if(confirm('流程的修改会影响整个报装管理功能，请慎重修改！\n确定要提交修改吗?'))document.applyFlowForm.submit();">
						</td>
					</tr>
					</tfoot>
				</table>
		</form>
	</body>
</html>
